import React from 'react';
import cookie from 'react-cookies';
import './userindex.scss';
import { NavLink, useNavigate } from 'react-router-dom';
import { Modal } from 'antd-mobile';

const BaseIndex = () => {
    let navigate = useNavigate()
    const LoginUser = cookie.load('LoginUser') ? cookie.load('LoginUser') : ''
    const [showLout, setshowLout] = React.useState(false)

    const onAction = (e) => {
        setshowLout(false)

        if (e.key == "confirm") {
            cookie.remove('LoginUser')
            navigate('/user/base/login')
        }
    }

    return (
        <>
            {/* <!-- 用户信息 --> */}
            <div className="user">
                <div className="avatar wow fadeInUp">
                    <img src={LoginUser.avatar} />
                </div>

                <div className="nickname wow fadeInUp" data-wow-delay="100ms">{LoginUser.nickname}</div>

                {LoginUser ? '' :
                    <NavLink to="/user/base/login" className="login wow fadeInUp" data-wow-delay="200ms">登录</NavLink>
                }
            </div>

            {/* <!-- 菜单 --> */}
            <div className="menulist wow fadeInUp" data-wow-delay="300ms">
                <NavLink to="/user/base/profile" className="item">
                    <span>基本资料</span>
                    <img src='/images/row.png' />
                </NavLink>
                <div onClick={() => { setshowLout(true) }} className="item">
                    <span>退出登陆</span>
                    <img src='/images/row.png' />
                </div>
            </div>

            <Modal
                className="baseindex"
                visible={showLout}
                content='是否确认退出'
                closeOnAction
                onAction={onAction}
                actions={[
                    {
                        key: 'cancel',
                        text: '取消',
                    },
                    {
                        key: 'confirm',
                        text: '确认',
                    },
                ]}
            />
        </>
    )
}

export default BaseIndex;